<template>
	<view class="mask" v-if="props.visible" @click="close"></view>
	<view class="custom-popup-componet" v-if="props.visible">
		<slot></slot>
	</view>
</template>

<script setup lang="ts">
	interface popupProps{
		visible: boolean
	}
	const props = withDefaults(defineProps<() => popupProps>(), {
		visible: false
	})
	
	const emits = defineEmits(['onClose'])
	
	const close = () => {
		emits("onClose")
	}
	
	
</script>

<style scoped lang="scss">
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 8888;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.custom-popup-componet{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		max-height: 50vh;
		background-color: #fff;
		border-top-right-radius: 50upx;
		border-top-left-radius: 50upx;
	}
</style>